<template>
  <!-- <div>
    御剑乘风来,除魔天地间!===app
    <hr />
    <router-view></router-view>
  </div>-->

  <div>
    <ul>
      <li>
        <!-- <a href="#/">我是tab1===first</a> -->
        <!-- <router-link to="/?id=1&name=jack">我是tab1===first</router-link> -->
        <router-link :to="{name:'First',query:{id:1,name:'jack'}}">我是tab1===first</router-link>
      </li>
      <li>
        <!-- <a href="#/second">我是tab2===second</a> -->
        <!-- <router-link to="/second?id=2">我是tab2===second</router-link> -->
        <router-link :to="{path:'/second',query:{id:2}}">我是tab2===second</router-link>
      </li>
      <li>
        <!-- <a href="#/third">我是tab3===third</a> -->
        <!-- <router-link to="/third/3/rose?age=18&gender=男">我是tab3===third</router-link> -->
        <!--错误写法： <router-link :to="{path:'/third',params:{ids:3,name:'rose'}}">我是tab3===third</router-link> -->
        <router-link
          :to="{name:'Third',params:{ids:3,name:'rose'},query:{age:18,gender:'男'}}"
        >我是tab3===third</router-link>
      </li>
    </ul>
    <hr />
    <!-- 坑位===占位符===路径匹配成功就会显示对应的组件=>显示在坑位中
    1-页面跳转组件不显示问题：
      a/找路由规则path
      b/找组件【不是你把组件写了就可以出来】
      c/找坑位[<router-view></router-view>]
    -->
    <router-view></router-view>
  </div>
</template>
<script>
import { RouterLink } from 'vue-router';

export default {
  name: "",
  data () {
    return {};
  },
  created () {
  },
  computed: {},
  methods: {},
  components: { RouterLink }
}
</script>
<style lang='less'  scoped>
ul {
  display: flex;
  li {
    margin: 40px;
  }
}

// .router-link-active {
//   /* 模糊匹配 */
//   background-color: pink;
// }
.router-link-exact-active {
  background-color: red;
}
</style>